import { HomeFilled, GiftFilled, MessageFilled, RegisterFilled, SigninFilled, class_esy } from 'esy-ui';
import { useLocation } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import { Img } from '@/components';
import QuickContent from './QuickContent';
import { useFormatText, useNavigation } from '@/hooks';
import { showFooter } from '@/constants';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import historyPng from '@/assets/images/common/bet_record.png';

const tabbar = [
  { text: 'home', icon: <HomeFilled />, link: '/' },
  { text: 'pref_activity', icon: <GiftFilled />, link: '/activity' },
  { text: 'online_service', icon: <MessageFilled />, link: '' },
  { text: 'free_register', icon: <RegisterFilled />, link: '/login?type=register' },
  { text: 'signin', icon: <SigninFilled />, link: '/login' },
];

const other = [
  { text: 'text_6', icon: <Img boxClassName='h-7 max-w-8' src={historyPng} />, link: '/bet/record' },
  { text: 'person_center', icon: <SigninFilled />, link: '/mine' },
];

function Footer() {
  const { text } = useFormatText();
  const navigation = useNavigation();
  const { pathname } = useLocation();
  const { userInfo } = useUserInfoStore();
  const { OnlineCustomerUrl } = useGlobalStore();

  if (!showFooter.test(pathname)) {
    return null;
  }

  return (
    <div className='relative'>
      <QuickContent {...userInfo} />
      <div className='bg-head border-t border-desc h-14 flex items-center'>
        {(userInfo?.Token ? [...tabbar.slice(0, 3), ...other] : tabbar).map((it, i) => {
          let linkUrl = it.link;
          // 客服配置设置
          if (it.text === 'online_service' && OnlineCustomerUrl) {
            linkUrl = OnlineCustomerUrl;
          }
          return (
            <div
              key={it.link || i}
              className={class_esy(['flex flex-1 flex-col items-center justify-center', pathname === it.link ? 'text-primary' : 'text-white'])}
              onClick={() => {
                navigation(linkUrl);
              }}
            >
              {it.icon}
              <div className={class_esy(['text-sm text-center', pathname === it.link ? 'text-primary' : 'text-bar'])}>{text(it.text)}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default observer(Footer);
